<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="800px">
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button v-if="selectedRowKeys.length > 0" preIcon="ant-design:delete-outlined" type="primary" @click="handleLeaveBatch" style="margin-right: 5px">批量请离</a-button>
        <div style="margin-left: 10px;margin-top: 5px"> 当前登录租户: <span class="tenant-name">{{ loginTenantName }}</span> </div>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { userColumns, userSearchFormSchema } from "../tenant.data";
import { deleteTenantUser } from "../tenant.api";
import { getUserList } from '/@/api/common/api';
import { useListPage } from "/@/hooks/system/useListPage";
import { BasicTable, TableAction } from '/@/components/Table';

const tenantId = ref<number>(0);
const loginTenantName = ref<string>('');
// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
  designScope: 'tenant-template',
  tableProps: {
    api: getUserList,
    columns: userColumns,
    immediate: false,
    formConfig: {
      schemas: userSearchFormSchema,
      labelWidth: 40,
      actionColOptions: {
        xs: 24,
        sm: 8,
        md: 8,
        lg: 8,
        xl: 8,
        xxl: 8,
      },
    },
    beforeFetch: (params) => {
      return Object.assign(params, { tenantId: unref(tenantId) });
    },
  },
});
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

// Emits声明
const emit = defineEmits(['register', 'success']);
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  tenantId.value = data.id;
  loginTenantName.value = data.name;
  success();
});
//设置标题
const title = '我的租户成员';
//表单提交事件
async function handleSubmit(v) {
  closeModal();
}

function getActions(record) {
  return [
    {
      label: '移除',
      onClick: handleLeave.bind(null, record.id),
    },
  ]
}

/**
 * 成功
 */
function success() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 请离
 * @param id
 */
async function handleLeave(id) {
  await deleteTenantUser({ userIds: id, tenantId: unref(tenantId) }, success)
}

/**
 * 批量请离
 */
async function handleLeaveBatch() {
  await deleteTenantUser({ userIds: selectedRowKeys.value.join(","), tenantId: unref(tenantId) }, success)
}
</script>

<style scoped>
/*update-begin---author:wangshuai ---date:20220705  for：查询组件input有后缀，隐藏掉------------*/
:deep(.ant-input-suffix) {
  display: none;
}

/*update-begin---author:wangshuai ---date:20220705  for：查询组件input有后缀，隐藏掉------------*/
</style>
